<template>
	<view>
		<u-navbar title="视频" :placeholder="true" leftIcon=" " :bgColor="bgColor" :titleStyle="titleStyle"></u-navbar>
		<view class="fixedTop">
			<view class="search">
				<u-search height="37" bgColor="#fff" shape="round" :showAction="false" disabled
					@click="toSearch"></u-search>
					<span @click="resetData">重置</span>
			</view>
		</view>
		<card ref="card" :list="listData"></card>
	</view>
</template>

<script>
	import card from '@/components/card/card.vue';
	export default {
		components: {
			card
		},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				query: {
					categoryIds: [],
					pageSize: 10,
					lastDocId: '',
					type: 'video',
					isDraft: false
				},
				listOver: false,
				listData: []
			};
		},
		onPullDownRefresh() {
			this.query.lastDocId = '';
			this.getData();
		},
		onReachBottom() {
			if (!this.listOver) {
				this.getData();
			}
		},
		onShow() {
			uni.$on('returnData', (data) =>{
				this.query = JSON.parse(data)
				this.query.type = 'video'
			})
			this.getData();

		},
		methods: {
			resetData(){
				this.query= {
					categoryIds: [],
					pageSize: 10,
					lastDocId: '',
					type: 'video',
					isDraft: false
				}
				this.getData();
			},
			toSearch() {
				uni.navigateTo({
					url: `/pages/news/search?video=1`
				});
			},
			getData() {
				uni.showLoading({
					title: '加载中...'
				});
				this.loadingOver = false;
				this.$api.queryArticles(this.query).then(res => {
					console.log(res);

					if (res.lastDocId) {
						this.query.lastDocId = res.lastDocId;
						this.listData = [...this.listData, ...res.list];
					} else {
						this.query.lastDocId = '';
						this.listData = res.list;
					}

					if (res.list.length < this.query.pageSize) {
						this.listOver = true;
					}
					this.loadingOver = true;
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			}
		}
	};
</script>

<style lang="scss">
	.fixedTop {
		width: 100%;
		background-color: #de4849;
		padding:10rpx 20rpx;
		box-sizing: border-box;
		z-index: 100;
		.search{
			display: flex;
			align-items: center;
			justify-content: space-between;
			span{
				margin: 0 10rpx;
				font-size: 30rpx;
				margin-left: 30rpx;
				color: #fff;
			}
		}
	}
</style>